<template>
    <div>
        <label class="FormItem"> 
            <span class="name">{{this.fieldName}}</span>
            <input type="text"
            :value="value"
            :placeholder="placeholder"
            @input="onValueChanged($event.target.value)"
            >
        </label>
        
    </div>
</template>

<script lang="ts">
 import Vue from "vue";
 import {Component,Prop} from "vue-property-decorator";

    @Component
    export default class FormItem extends Vue {
        
        @Prop({default:""}) readonly value!: string;
        @Prop({required: true}) fieldName!: string;
        @Prop()placeholder?: string;

        onValueChanged(value: string){
            this.$emit('update:value',value)
        }
    }
</script>

<style lang="scss" scoped>
.FormItem{
    font-size: 14px;
    display: block;
    padding-left: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    .name{
     padding-right: 16px;
    }
    input{
    height: 40px;
    padding: 16px 0;
    flex-grow: 1;
    background: transparent;
    border: none;
    padding-right: 16px;
    }
}
</style>